<template>
    <div class="a1">
        <home-header></home-header>
        <div class="wrapper">
            <div class="left-li">
                    <ul>
                        <li class="li-s1" >我的账户</li>
                        <li type="primary" @click = "fskl">个人中心</li>
                        <li>消息通知</li>
                        <li>个人信息</li>
                        <li>安全设置</li>
                        <li>地址管理</li>
                        <li>我的积分</li>
                        <li>我的足迹</li>
                        <li>邀请有礼</li>
                        <li>幸运抽奖</li>
                    </ul>
                    <hr width="100%" align="left">
                    <ul>
                        <li class="li-s1">交易管理</li>
                        <li>我的订单</li>
                        <li>优惠劵</li>
                        <li>礼品卡</li>
                        <li>评价晒单</li>
                        <li>售后服务</li>
                    </ul>
                    <hr width="100%" align="left">
                    <ul>
                        <li class="li-s1">我的收藏</li>
                        <li>收藏的商品</li>
                        <li>收藏的专题</li>
                        <li>关注的品牌</li>
                    </ul>
                    <hr width="100%" align="left">
                    <ul>
                        <li class="li-s1">帮助中心</li>
                        <li>帮助中心</li>
                        <li>在线客服</li>
                    </ul>
            </div>
            <div class="right-ri" v-loading="loading">
                <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                    <el-tab-pane label="全部订单" name=0></el-tab-pane>
                    <el-tab-pane label="待付款" name=1></el-tab-pane>
                    <el-tab-pane label="待发货" name=2></el-tab-pane>
                    <el-tab-pane label="待收货" name=3></el-tab-pane>
                    <el-tab-pane label="待评价" name=4></el-tab-pane>
                    <el-tab-pane label="已完成" name=5></el-tab-pane>
                    <el-tab-pane label="已取消" name=6></el-tab-pane>
                </el-tabs>
                <div class="NeiBao">
                    <ul v-for="item in listData " :key="item.id">
                        <li class="Neili">
                            <div class="title">
                                <div class="TitleLeft">
                                    <div>下单时间：{{item.id}}</div>
                                    <div>订单编号：{{item.createTime}}</div>
                                </div>
                                <div class="TitleRight">
                                    付款截至：
                                </div>
                            </div>
                            <div class="bottomT">
                                <ul>
                                    <li class="BottomLeft" v-for="items in item.skus" :key="items.id">
                                        <img :src="items.image" alt="">  
                                        <div class="info">
                                            <div>{{items.name}}</div>
                                            <p>{{items.attrsText}}</p>
                                        </div>
                                        <div class="price">￥{{items.curPrice}}</div>
                                        <div class="count">x{{items.quantity}}</div>
                                    </li>
                                </ul>
                                <div class="BottomRight">
                                    <div class="state">
                                        <div v-if="item.orderState==1">为待付款</div>
                                        <div v-else-if="item.orderState==2">为待发货</div>
                                        <div v-else-if="item.orderState==3">为待收货</div>
                                        <div v-else-if="item.orderState==4">为待评价</div>
                                        <div v-else-if="item.orderState==5">为已完成</div>
                                        <div v-else-if="item.orderState==6">为已取消</div>
                                    </div>
                                    <div class="amount">
                                        <div style="color:red;">￥{{item.payMoney}}</div>
                                        <div>(含运费：￥{{item.postFee}})</div>
                                        <div>在线支付</div>
                                    </div>
                                    <div class="action">
                                        <div>立即付款</div>
                                        <div>查看详情</div>
                                        <div>取消订单</div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div class="block">
                        <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage1"
                        :page-size="1"
                        layout="prev, pager, next, jumper"
                        :total="100">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
       <home-footer></home-footer>
    </div>
</template>
<script>
import HomeHeader from "@/common/HomeHeader.vue";
import HomeFooter from '@/common/HomeFooter.vue';
export default {
    components: { HomeHeader, HomeFooter },
    name:"RtSv",
    data() {
        return {
            activeName: 'first',
            listData:[],
            loading:false,
            currentPage1: 1,
            order:0,
            val:1
        };
    },
    async created(){
        let res=await this.$http.orderName(this.val,10,this.order);
        this.listData=res.data.result.items
    },
    methods:{
        fskl(){
            this.$router.push("/FsKl")
        },
        async handleClick(tab) {
            this.loading=true
            this.order=tab.name
            let res=await this.$http.orderName(this.val,10,this.order);
            this.listData=res.data.result.items
            this.loading=false
        },
        async handleCurrentChange(val) {
            this.loading=true
            this.val=val
            let res=await this.$http.orderName(val,10,this.order);
            this.listData=res.data.result.items
            this.loading=false
        }
    },  
}
</script>
<style lang="less" scoped>
*{list-style-type:none; margin: 0; padding: 0;}
li {  color : rgb(0, 0, 0) ; transition: 0.5 s; }
li:hover {  color : rgb(47, 255, 0) ; }
.a1{
    width: 100%;
    background-color: #f5f5f5;
}
.wrapper{
    padding:0 250px;
    display:flex;
    margin-top:20px;
}
.left-li{
    width: 220px;
    line-height: 35px;
    text-align: center;
    background-color: #fff;
    ul{
        li{
            margin:10px 0;
        }
    }
}
.right-ri{
    width: 100%;
    margin-left:20px;
    background-color: rgb(255, 255, 255);
    .NeiBao{
        width: calc(100%-60px);
        margin: 0 30px; 
        .Neili{
            .title{
                width: calc(100%-40px);
                height: 50px;
                padding: 0 20px; 
                background: #f5f5f5;
                display: flex;
                justify-content: space-between;
                line-height: 50px;
                .TitleLeft{
                    display: flex;
                }
            }
            .bottomT{
                width: 100%;
                display: flex;
                justify-content: space-between;
                ul{
                    width: 50%;
                    .BottomLeft{
                        width:100%;
                        height: 70px;
                        padding: 10px;
                        display: flex;
                        img{
                            width: 68px;
                            width: 68px;
                        }
                        .info{
                            width: 220px;
                            height: 70px;
                            margin: 0 10px;
                            div{font-size: 14px;margin-bottom: 10px;}
                            p{
                                color: #999;
                                font-size: 12px;
                            }
                        }
                        .price{
                            width: 100px;
                            height: 70px;
                            text-align: center;
                            font-size: 14px;
                        }
                        .count{
                            width: 80px;
                            height: 70px;
                            text-align: center;
                            font-size: 14px;
                        }
                    }    
                }
                
                .BottomRight{
                    width:50%;
                    min-height: 120px;
                    display: flex;
                    justify-content: space-around;
                    .state{
                        padding: 30px;
                        width: 80px;
                        height: 90px;
                        text-align: center;
                    }
                    .amount{
                        padding: 20px;
                        width: 160px;
                        height: 90px;
                        text-align: center;
                        div{margin-top: 10px;}
                    }
                    .action{
                        padding: 20px;
                        width: 100px;
                        height: 90px;
                        text-align: center;
                        div{margin-top: 10px;}
                    }
                }
            }
        }
    }
}
.li-s1{
    font-size: 20px; 
}


</style>